<template>
  <div class="app-container">
    <!-- <app-header></app-header> -->
    <div class="app-main">
      <div class="progress-bar">
        <img src="@/assets/images/apply/progress-bar2.png" alt="" />
      </div>
      <div class="result">
        <div class="title">评估结果（仅供参考）</div>
        <ul>
          <li>
            <span class="name">评估对象</span>
            <span class="value">{{
              result.recordPropertySite.replace(/\//gim, "") +
                result.recordPlotName +
                result.rectrdBuilding +
                result.rectrdUnit +
                result.rectrdHouseNumber 
            }}</span>
          </li>
          <template v-if=" result.faileCode !=='11510'">
            <li>
              <span class="name middle">评估结果</span>
              <div class="value">
                <p class="price">
                  <span>单价</span>
                  <span
                    ><strong>{{
                      Number(result.price).toLocaleString()
                    }}</strong>
                    元/m²</span
                  >
                </p>
                <p class="price">
                  <span>总价</span>
                  <span
                    ><strong>{{
                      Number(result.totalPrice).toLocaleString()
                    }}</strong>
                    万元</span
                  >
                </p>
              </div>
            </li>

            <li>
              <span class="name middle">预估额度</span>
              <div class="value">
                <p class="price">
                  <span>&nbsp;</span>
                  <span 
                    ><strong>{{
                      Number(result.rectrdAssessFuture).toLocaleString()
                    }}</strong>
                    万元</span
                  >
                </p>
              </div>
            </li>
          </template>
          <li v-else>
            <span class="name">评估结果</span
            ><span class="value"
              >暂时无法预估您的房产价值，您可以直接提交申请，将由我行专属客户经理为您提供服务！</span
            >
          </li>
          
        </ul>
      </div>
      <div class="btn-group">
        <button
          class="btn btn-plain"
          @click="addMore"
          v-if="result.faileCode === successCode"
        >
          添加其他房产
        </button>
        <button class="btn btn-plain" @click="reset" v-else>重新评估</button>
        <button class="btn btn-primary" @click="submit">提交申请</button>
      </div>
    </div>
  </div>
</template>

<script>
import { submitBuilding } from "@/api/customer";
let evaluateInfo;
export default {
  name: "evaluate",
  data() {
    return {
      result: evaluateInfo[evaluateInfo.length - 1],
      evaluate_successCode: evaluateInfo.faileCode, //评估成功code
      faileCode: evaluateInfo.faileCode,
      successCode: "000000"
    };
  },
  beforeCreate() {
    evaluateInfo = JSON.parse(window.sessionStorage.getItem("evaluateInfo"));
  },
  created() {
  },
  methods: {
    /* 添加其他房产 */
    addMore() {
      this.$router.replace({ name: "apply2" });
    },
    /* 重新评估 */
    reset() {
      evaluateInfo.pop();
      window.sessionStorage.setItem(
        "evaluateInfo",
        JSON.stringify(evaluateInfo)
      );
      this.$router.replace({ name: "apply2" });
    },
    /* 提交申请 */
    submit() {
      submitBuilding({
        propertyNumber: window.sessionStorage.getItem("orderId"),
        paramsList: evaluateInfo,
        ReferralUserid: this.$store.getters["user/ReferralUserid"],
        userId: this.$store.getters["user/userId"]
      }).then(res => {
        //  "11507","没有可分配的客户经理!"
        if (["000000", "11507"].includes(res.respCode)) {
          this.$router.replace({ name: "apply3" });
          window.sessionStorage.clear();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$progress-bar-height: 0.48rem;
$btn-group-height: 1rem;
$padding-lr: 0.15rem;
$color-border: #ccc;
.app-main {
  .progress-bar {
    width: 100%;
    height: 0.48rem;
    display: flex;
    align-items: center;
    padding: 0 $padding-lr;
    border-bottom: 1px solid $color-border;
    img {
      width: 100%;
      height: 0.2rem;
    }
  }
  .result {
    width: 100%;
    padding: $padding-lr;
    height: calc(100% - #{$progress-bar-height} - #{$btn-group-height});
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .title {
      position: relative;
      padding-left: 0.12rem;
      font-size: 0.17rem;
      line-height: 0.2rem;
      color: #444;
      font-weight: bold;
      margin-bottom: 0.2rem;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 0.05rem;
        height: 100%;
        background-color: #3a9bde;
      }
    }
    li {
      $price-height: 0.4rem;
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 0.14rem;
      color: #333;
      margin-bottom: 0.2rem;
      .name {
        // color: #666;
        flex: 2;
        &.middle {
          line-height: $price-height;
        }
      }
      .value {
        flex: 5;
        .price {
          height: $price-height;
          border: 1px solid #ccc;
          border-radius: 0.04rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.1rem;
          margin-bottom: 0.1rem;
          strong {
            color: #df3031;
            font-size: 0.2rem;
          }
        }
      }
    }
  }
  .btn-group {
    width: 100%;
    height: $btn-group-height;
    padding: 0 $padding-lr;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
